<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ name: 'base' }">仓库系统</el-breadcrumb-item>
        <el-breadcrumb-item>盘点列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="together-content">
      <!-- 搜索栏 -->
      <el-form :inline="true" class="search-form">
        <!-- 搜索输入框 -->
        <el-form-item>
          <el-input v-model="searchForm.keyword" placeholder="单据号/备注" clearable />
        </el-form-item>
        <el-form-item label="仓库：" style="width: 200px">
          <el-input v-model="searchForm.warehouseName" readonly placeholder="选择仓库" @click="warehouseVisible = true" />
        </el-form-item>

        <!-- 时间范围选择 -->
        <el-form-item label="日期：">
          <el-date-picker v-model="searchForm.dateRange" type="datetimerange" range-separator="-"
            start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" style="width: 340px" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 分割线 -->
      <el-divider style="margin: 10px 0" />

      <!--  -->
      <!-- 表格操作按钮 -->
      <div style="text-align: right; margin-bottom: 1rem">
        <el-button plain style="height: 25px" @click="router.push({ name: 'editStock' })" type="primary">新增</el-button>
        <el-button plain style="height: 25px" type="success">审核</el-button>
        <el-button plain style="height: 25px" type="danger">删除</el-button>
        <el-button plain style="height: 25px">打印</el-button>
        <el-button plain style="height: 25px">导入</el-button>
        <el-button plain style="height: 25px">对单</el-button>
      </div>
      <!-- 仓库搜索列表弹出对话框 -->
      <el-dialog v-model="warehouseVisible" title="仓库搜索列表" width="40%" style="height: auto;" draggable
        :show-close="true">
        <!-- 调用仓库的搜索组件 -->
        <WareHouse ref="warehouseRef"
          :info="{ selection: true, no: false, name: true, code: true, status: false, op: false, outButton: true }" />
        <br /><br />
      </el-dialog>
      <!-- 表格 -->
      <el-table :data="checkStockList" border style="width: 100%" align="center">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="code" label="盘点单号" fixed width="180" />
        <el-table-column prop="warehouseName" label="仓库" width="150">
          <template #default="{ row }">
            <template v-if="Array.isArray(row.warehouseCode)">
              <el-tag size="small" v-for="code in row.warehouseCode" :key="code" style="margin-right: 4px;">
                {{ getWarehouseLabel(code) }}
              </el-tag>
            </template>
            <span v-else>{{ row.warehouseName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="盘点日期" width="160" />
        <el-table-column prop="workerNo" label="盘点人" width="100" />
        <el-table-column prop="auditorNo" label="审核人" width="100" />
        <el-table-column prop="diffNumber" label="盘点结果" width="120">
          <template #default="{ row }">
            <span :class="{ 'text-danger': row.diffNumber < 0, 'text-success': row.diffNumber > 0 }">
              {{ row.diffNumber }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" >
          <template #default="scope">
            {{ showStatus(scope.row.planStatus) }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="120" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button link type="warning" size="small"
              @click="router.push({ name: 'editStock', params: { code: row.code } })">编辑</el-button>
            <el-button link type="danger" size="small" @click="deleteCountOrder(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分割线 -->
      <el-divider style="margin: 10px 0" />

      <!-- 分页 -->
      <el-pagination :current-page="pageNum" v-if="pageInfo" :page-size="pageSize" :total="pageInfo.total" 
        layout="total, ->, prev, pager, next, jumper" background/>

    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, inject } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import WareHouse from '@/views/basic/WareHouse.vue'

let router = useRouter(), axios = inject("axios")
//仓库搜索选中结果
let warehouseVisible = ref(false)
let warehouseRef = ref();
let pageNum = ref(1), pageSize = ref(10), pageInfo = ref(null);
let checkStockList = ref(null);
// 搜索条件
const searchForm = reactive({
  warehouseId: '',
  warehouseName: '',
  dateRange: [],
})


watch(warehouseVisible, (newVisible) => {
  if (!newVisible) {
    if (warehouseRef.value) { //这里需要加上if判断，子组件中没有选择数据时为undefined，可能用于点击仓库，但是没选择，所以导致undefined报错
      searchForm.value.warehouseId = warehouseRef.value.selectedArray[0].id
      searchForm.value.warehouseName = warehouseRef.value.selectedArray[0].name
      //获取到仓库编码，存数据库用，仓库name仅用作展示
      //用完之后清空，避免污染其他地方数据
      warehouseRef.value.clearSelected();
    }
  }
})
// 模拟数据
const list = ref(null)






// 查询
const loading = ref(false);
const submit = async () => {
  if (loading.value) return;
  loading.value = true;
  let res = await axios({
    url: '/xyy/check-stock/page',
    method: 'post',
    data: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      // companyCode: company,
      //搜索表单中的信息
      keyword: searchForm.value.keyword,
      beginTime: searchForm.value.dateRange == null ? null : searchForm.value.dateRange[0],
      endTime: searchForm.value.dateRange == null ? null : searchForm.value.dateRange[1],
      type: searchForm.value.type,
      staffNo: searchForm.value.staffNo
    }
  })
  pageInfo.value = res.data.pageInfo;
  checkStockList.value = res.data.pageInfo ? res.data.pageInfo.list : null
  console.log("pageInfo---:", pageInfo);

}




// 删除盘点单
const deleteCountOrder = (row) => {
  ElMessageBox.confirm(`确定删除盘点单 ${row.code}？`, '警告', {
    type: 'warning'
  }).then(() => {
    list.value = list.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
  }).catch(() => { })
}




</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}

.text-danger {
  color: red;
}

.text-success {
  color: green;
}

.clickable-cell {
  cursor: pointer;
  padding: 8px;
  color: #1890ff;
  text-decoration: underline;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clickable-cell:hover {
  background-color: #f0f7ff;
}

.dialog-footer {
  text-align: right;
}

.cell-item {
  font-weight: bold;
}
</style>